<template>
    <div class="power" v-loading="loading">
        <div class="article-item">
            <div class="item-left">
                <el-checkbox label="菜单" @change="useMenuChange" v-model="useMenu" style="color: #1b3646" />
            </div>
            <div class="item-right">
                <el-checkbox label="功能" @change="useMenuChange" v-model="useCheck" style="color: #1b3646" />
            </div>
        </div>
        <article class="article">
            <div class="article-item" v-for="(item, index) in moduleData" :key="item.id">
                <div class="item-left">
                    <el-checkbox :label="item.name" v-model="leftChecked[index]" @change="leftCheckChange($event, index)" :true-label="item.id" :false-label="0" :disabled="!item.children.length" />
                </div>
                <div class="item-right">
                    <el-checkbox-group v-model="checkList[index]" @change="rightCheckChange($event, index)">
                        <el-checkbox :label="subItem.id" v-for="subItem in item.btns" :key="subItem.id">
                            <template #default>
                                {{ subItem.name }}
                            </template>
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
        </article>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { getMenus, setMenus } from "@/service/api/role.js";
import { useRoute } from "vue-router";
const route = useRoute();
const moduleData = ref([]);
const loading = ref(false);
const checkList = ref([]);
const useMenu = ref(false);
const useCheck = ref(false);
const leftChecked = ref([]);

const leftCheckChange = (isChecked, index) => {
    isChecked ? (checkList.value[index] = moduleData.value[index].btns.map((item) => item.id)) : (checkList.value[index] = []);
    if (moduleData.value.filter((item) => item.btns.length).length === leftChecked.value.filter((item) => item).length) {
        useMenu.value = true;
        useCheck.value = true;
    } else {
        useMenu.value = false;
        useCheck.value = false;
    }
};
const rightCheckChange = (checked, index) => {
    if (moduleData.value[index].btns.length >= checked.length && checked.length > 0) {
        leftChecked.value[index] = moduleData.value[index].id;
    } else {
        leftChecked.value[index] = 0;
    }
    if (moduleData.value.map((item) => item.btns).flat().length === checkList.value.flat().filter((item) => item).length) {
        useCheck.value = true;
    } else {
        useCheck.value = false;
    }
    if (moduleData.value.filter((item) => item.btns.length).length === leftChecked.value.filter((item) => item).length) {
        useMenu.value = true;
    } else {
        useMenu.value = false;
    }
};
const useMenuChange = (isChecked) => {
    if (isChecked) {
        for (let i = 0; i < moduleData.value.length; i++) {
            checkList.value[i] = moduleData.value[i].btns.map((item) => item.id);
            leftChecked.value[i] = moduleData.value[i].btns.length && moduleData.value[i].id;
            useCheck.value = true;
            useMenu.value = true;
        }
    } else {
        leftChecked.value = [];
        checkList.value = [];
        useCheck.value = false;
        useMenu.value = false;
    }
};
getMenusFn();
function reserve(tree) {
    for (let i = 0; i < tree.length; i++) {
        if (tree[i].level === 2 && tree[i].checked === 0) {
            moduleData.value.push(tree[i]);
        }
        if (!tree[i].children.length) continue;
        reserve(tree[i].children);
    }
}
function getMenusFn() {
    loading.value = true;
    useMenu.value = false;
    useCheck.value = false;
    getMenus(route.query.roleId)
        .then((res) => {
            loading.value = false;
            if (res.code === 200) {
                reserve(res.data);
                for (let i = 0; i < moduleData.value.length; i++) {
                    leftChecked.value[i] = moduleData.value[i].btns.some((item) => item.checked === 0) && moduleData.value[i].btns.length ? moduleData.value[i].id : 0;
                    checkList.value[i] = moduleData.value[i].btns.map((item) => (item.checked === 0 ? item.id : 0)).filter((item) => item);
                }
                if (!moduleData.value.map((item) => item.btns).flat().length || !moduleData.value.length) return;
                if (moduleData.value.map((item) => item.btns).flat().length === checkList.value.flat().filter((item) => item).length) {
                    useCheck.value = true;
                }
                if (moduleData.value.filter((item) => item.btns.length).length === leftChecked.value.filter((item) => item).length) {
                    useMenu.value = true;
                }
            }
        })
        .catch((err) => (loading.value = false));
}
const setMenusFn = async () => {
    loading.value = true;
    const powers = checkList.value.flat().filter((item) => item);
    const res = await setMenus({
        roleId: route.query.roleId,
        powers,
        type: 2
    }).catch((err) => (loading.value = true));
    loading.value = false;
    if (res.code === 200) {
        // store.setMenu();
        ElMessage({
            message: "保存成功",
            type: "success"
        });
    }
};
defineExpose({
    setMenusFn
});
</script>

<style lang="less" scoped>
.power {
    height: calc(100% - 70px);
    .article-item {
        display: flex;

        .item-left {
            display: flex;
            align-items: center;
            width: 250px;
            padding: 15px 0 15px 24px;
            border-right: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            font-size: 14px;
            color: #282828;
        }

        .item-right {
            flex: 1;
            padding: 15px 0 15px 24px;
            border-bottom: 1px solid #ededed;
        }
    }

    .article {
        height: calc(100% - 100px);
        overflow: auto;

        :deep(.el-checkbox),
        :deep(.el-radio) {
            color: #666;
            font-weight: 400;
        }
    }
}
</style>
